<template>
    <div class="pl-20px">
        <div class="pb-12px flex items-center flex-col">
            <div class="w-[100%] flex items-center justify-center text-[12px] pb-10px mb-10px"
                style="border-bottom: 1px solid #ccc;">
                优化方案
                <div class="w-[100px] mx-7px">
                    <el-select v-model="fangAn" class="" size="small" placeholder="请选择" @change="changeHandle">
                        <el-option v-for="item in fangAnSelectOption" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                最大使用内存
                <div class="w-[70px] mx-7px">
                    <el-input class="" type="number" size="small" placeholder="请输入" readonly maxlength="120" />
                </div>
                MB
            </div>
            <el-scrollbar height="450px">
                <el-form ref="ruleFormRef" inline-messa :model="formData" :rules="formRules" label-width="165px"
                    size="small" class="">
                    <el-form-item label="key_buffer_size" prop="key_buffer_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.key_buffer_size" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">MB, 用于索引的缓冲区大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="query_cache_size" prop="query_cache_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.query_cache_size" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">MB, 查询缓存,不开启请设为0</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="tmp_table_size" prop="tmp_table_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.tmp_table_size" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">MB, 临时表缓存大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.innodb_buffer_pool_size"
                                    size="small" placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">MB, Innodb缓冲区大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.innodb_log_buffer_size"
                                    size="small" placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">MB, Innodb日志缓冲区大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="sort_buffer_size" prop="sort_buffer_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.sort_buffer_size" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 每个线程排序的缓冲大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="read_buffer_size" prop="read_buffer_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.read_buffer_size" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 读入缓冲区大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.read_rnd_buffer_size"
                                    size="small" placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 随机读取缓冲区大小</div>
                        </div>
                    </el-form-item>

                    <!-- <el-form-item label="join_buffer_size" prop="join_buffer_size" required>
                    <div class="flex justify-start items-center">
                        <div class="w-[70px]">
                            <el-input class="" type="number" v-model.number ="formData.join_buffer_size" size="small" placeholder="请输入"  maxlength="120" />
                        </div>
                        <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 关联表缓存大小</div>
                    </div>
                </el-form-item> -->

                    <el-form-item label="thread_stack" prop="thread_stack" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.thread_stack" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 每个线程的堆栈大小</div>
                        </div>
                    </el-form-item>

                    <el-form-item label="binlog_cache_size" prop="binlog_cache_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.binlog_cache_size"
                                    size="small" placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">KB * 连接数, 二进制日志缓存大小(4096的倍数)</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="thread_cache_size" prop="thread_cache_size" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.thread_cache_size"
                                    size="small" placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">线程池大小</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="table_open_cache" prop="table_open_cache" required>
                        <div class="flex justify-start items-center">
                            <div class="w-[70px]">
                                <el-input class="" type="number" v-model.number="formData.table_open_cache" size="small"
                                    placeholder="请输入" maxlength="120" />
                            </div>
                            <div class="text-[12px] text-color-[#999] ml-5px">表缓存</div>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="max_connections" prop="max_connections" required>
                    <div class="flex justify-start items-center">
                        <div class="w-[70px]">
                            <el-input class="" type="number" v-model.number ="formData.max_connections" size="small" placeholder="请输入"  maxlength="120" />
                        </div>
                        <div class="text-[12px] text-color-[#999] ml-5px">最大连接数</div>
                    </div>
                </el-form-item> -->
                </el-form>
            </el-scrollbar>
            <div class="w-[100%] flex justify-end mt-20px">
                <el-button type="primary" :loading="loading.reload" size="small"
                    @click="reloadHandle()">重启数据库</el-button>
                <el-button type="primary" :loading="loading.sava" size="small" @click="saveHandle()">保存</el-button>
            </div>

        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { performancesMap } from "./data"
import { getGlobalPerformanceParamsPermanentAPI, setGlobalPerformanceParamsPermanentAPI } from '@/api/systemMonitor'

// 提交按钮loading
const loading = reactive({
    sava: false,//保存
    reload: false, //重启数据库
})
const fangAn = ref('')

let formData = reactive({
    "binlog_cache_size": "",
    "innodb_buffer_pool_size": "",
    "innodb_log_buffer_size": "",
    "key_buffer_size": "",
    "query_cache_size": "",
    "read_buffer_size": "",
    "read_rnd_buffer_size": "",
    "sort_buffer_size": "",
    "table_open_cache": "",
    "thread_cache_size": "",
    "thread_stack": "",
    "tmp_table_size": ""
})
const fangAnSelectOption = ref([{
    label: '情选择',
    value: '',
}, {
    label: '1-2GB',
    value: '1-2GB',
}, {
    label: '2-4GB',
    value: '2-4GB',
}, {
    label: '4-8GB',
    value: '4-8GB',
}, {
    label: '8-16GB',
    value: '8-16GB',
}, {
    label: '16-32GB',
    value: '16-32GB',
}])
const ruleFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
    "binlog_cache_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "innodb_buffer_pool_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "innodb_log_buffer_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "key_buffer_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "query_cache_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "read_buffer_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "read_rnd_buffer_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "sort_buffer_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "table_open_cache": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "thread_cache_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "thread_stack": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
    "tmp_table_size": [
        { required: true, message: '此项必填', trigger: 'blur' },
        { type: 'number', message: '必须是数字', trigger: 'blur' },
    ],
})

onMounted(() => {
    getGlobalPerformanceParamsPermanentAPI().then((res) => {
        for (const key in formData) {
            if (Object.prototype.hasOwnProperty.call(formData, key)) {
                if (res.data[key] != '') {
                    formData[key] = res.data[key];
                }
            }
        }
    })
})

//提交
const saveHandle = async () => {
    loading.sava = true;
    setGlobalPerformanceParamsPermanentAPI({
        ...formData,
    }).then(() => {
        ElMessage.success("操作成功")
    }).finally(() => {
        loading.sava = false;
    })
}
// 重启数据库
const reloadHandle = () => {
    loading.reload = true;
    setGlobalPerformanceParamsPermanentAPI({

    }).then(() => {
        ElMessage.success("操作成功")
    }).finally(() => {
        loading.reload = false;
    })
}
const changeHandle = (val) => {
    if (val !== '') {
        const per = performancesMap[val];
        for (const key in formData) {
            if (Object.prototype.hasOwnProperty.call(formData, key)) {
                formData[key] = per[key];
            }
        }
    }
}
</script>